import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { getIn } from 'immutable'
import * as todoActions from '../store/action/todo.action'

class Footer extends Component {
  clearTodos = () => {
    if(window.confirm('确认清除已完成任务吗')){
      this.props.clear_todo()
    }
  }
  render() {
    let taskLen = this.props.todos.filter(todo => !todo.isCompleted).length
    return (
      <footer className="footer">
        <span className="todo-count"><strong>{taskLen}</strong> item left</span>
				<ul className="filters">
          <li>
            <a className="selected" onClick={() => { this.props.modify_filter_todo('all') }}>All</a>
          </li>
          <li>
            <a onClick={() => { this.props.modify_filter_todo('active') }}>Active</a>
          </li>
          <li>
            <a onClick={() => { this.props.modify_filter_todo('completed') }}>Completed</a>
          </li>
        </ul>
				<button className="clear-completed" onClick={this.clearTodos}>Clear completed</button>
      </footer>
    )
  }
}

// 获取 store 当中的数据
const mapStateToProps = (state) => ({
  todos: getIn(state.todoReducer, ['todolist']),
})

// 获取 store 当中的指令
const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(todoActions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Footer)